import React, { useState, useEffect } from 'react'
import { Space, Table, Button, Popconfirm, Tag, Drawer, Input, Tree, Select, Modal } from 'antd'
import { getAdminList, deleteAdmin, addAdmin, updateAdmin } from '../../api/user'
import menus from '../../router/menus'
function Com() {
  const [adminList, setAdminList] = useState([])
  useEffect(() => {
    getAdminList().then(res => setAdminList(res.data.data))
  }, [])
  // 编辑管理员 对话框
  const [isModalVisible, setIsModalVisible] = useState(false);
  
  const columns = [
    {
      title: '序号',
      render: (text, record, index) => <span>{index + 1}</span>
    },
    {
      title: '管理员账户',
      dataIndex:'adminname'
    },
    {
      title: '角色',
      dataIndex: 'role',
      render: (text) => {
        return text === 2 ? <Tag>超级管理员</Tag> : <Tag>管理员</Tag>
      }
    },
    {
      title: '操作',
      render: (text, record) => {
        return <Space>
          <Button onClick = { () => {
            setIsModalVisible(true)
            setAdminname(record.adminname)
            setRole(record.role)
            setCheckedKeys(record.checkedKeys)
          }}>编辑</Button>
          <Popconfirm
            title="确定删除吗?"
            onConfirm={ () => {
              deleteAdmin({ adminid: record.adminid }).then(() => {
                getAdminList().then(res => setAdminList(res.data.data))
              })
            }}
            onCancel={() => {}}
            okText="确定"
            cancelText="取消"
          >
            <Button>删除</Button>
          </Popconfirm>
        </Space>
      }
    }
  ]

  // 添加管理员抽屉
  const [visible, setVisible] = useState(false);
  const [adminname, setAdminname] = useState('');
  const [password, setPassword] = useState('');
  const [role, setRole] = useState(1);
  const [checkedKeys, setCheckedKeys] = useState(['0-0']);

  
  return (
    <Space style={{ width: '100%'}} direction="vertical">
      <Button onClick = { () => { setVisible(true) }}>添加管理员</Button>
      <Table 
        dataSource = { adminList }
        columns = { columns }
        rowKey = "adminid"
      ></Table>
      {/* 添加管理员 */}
      <Drawer title="Basic Drawer" placement="right" onClose={() => { 
        setAdminname('')
        setPassword('')
        setRole(1)
        setCheckedKeys(['0-0'])
        setVisible(false)
       }} visible={visible}>
        <Space style={{ width: '100%'}} direction="vertical">
          <Input value={adminname} onChange = { (e) =>  setAdminname(e.target.value) } placeholder="管理员账户" />
          <Input value={password} onChange = { (e) =>  setPassword(e.target.value) } placeholder="密码" />
          <Select value={ role } onChange = { (val) => setRole(val) } defaultValue = { 1 } style={{ width: '100%'}}>
            <Select.Option value={1}>管理员</Select.Option>
            <Select.Option value={2}>超级管理员</Select.Option>
          </Select>
          <Tree
            checkable
            treeData={menus}
            defaultExpandAll // 自动展开所有项
            checkedKeys = { checkedKeys }
            onCheck = { (checkedKeys) => {
              console.log(checkedKeys)
              setCheckedKeys(checkedKeys)
            }}
          />
          <Button type="primary" onClick = { () => {
            const params = {
              adminname, password, role, checkedKeys
            }
            console.log(params)
            addAdmin(params).then(() => {
              setAdminname('')
              setPassword('')
              setRole(1)
              setCheckedKeys(['0-0'])
              setVisible(false)
              getAdminList().then(res => setAdminList(res.data.data))
            })
          }}>添加</Button>
        </Space>
      </Drawer>
      {/* 编辑管理员 */}
      <Modal footer={null} title="修改管理员信息" visible={isModalVisible} onOk={() => {}} onCancel={() => {
        setAdminname('')
        setPassword('')
        setRole(1)
        setCheckedKeys(['0-0'])
        setIsModalVisible(false)
      }}>
        <Space style={{ width: '100%'}} direction="vertical">
          <Input value={adminname} readOnly onChange = { (e) =>  setAdminname(e.target.value) } placeholder="管理员账户" />
          <Select value={ role } onChange = { (val) => setRole(val) } defaultValue = { 1 } style={{ width: '100%'}}>
            <Select.Option value={1}>管理员</Select.Option>
            <Select.Option value={2}>超级管理员</Select.Option>
          </Select>
          <Tree
            checkable
            treeData={menus}
            defaultExpandAll // 自动展开所有项
            checkedKeys = { checkedKeys }
            onCheck = { (checkedKeys) => {
              console.log(checkedKeys)
              setCheckedKeys(checkedKeys)
            }}
          />
          <Button type="primary" onClick = { () => {
            const params = {
              adminname, role, checkedKeys
            }
            console.log(params)
            updateAdmin(params).then(() => {
              setAdminname('')
              setPassword('')
              setRole(1)
              setCheckedKeys(['0-0'])
              setIsModalVisible(false)
              getAdminList().then(res => setAdminList(res.data.data))
            })
          }}>修改</Button>
        </Space>
      </Modal>
    </Space>
  )
}

export default Com


